/*
 *项目详情文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { formatTime } from '@app/constants/CommonFn.jsx';
import {regionArray,projectData,endexData,analysisJson,adminUser} from '@app/constants/DataSource.jsx';
import { Row, Col, Button, Icon, Card, Avatar, 
  Breadcrumb, message, Form, Input, Progress, Menu,
  Dropdown, Table, Divider, Popconfirm, Modal, InputNumber} from 'antd';
const { TextArea } = Input;
const FormItem = Form.Item;
class ProjectInfo extends Component {
  constructor(props) {
    const key = props.location.search.slice(1).split('=')[1];
    if(!key || key<0 || key > projectData.length-1){
      window.location.href = '/ProjectTeam';
    }
    const user = [];
    let keyArray = 0;
    endexData[analysisJson.region].user.map((item) => {
      projectData[key].user.map((i) => {
        if(i === item.name){
          item.ranksId = endexData[analysisJson.region].ranksId;
          item.region = regionArray[endexData[analysisJson.region].key-1];
          item.key = keyArray;
          keyArray++;
          user.push(item);
        }
      })
    });
    super(props);
    this.state = {
      key:key,
      data:projectData[key],
      user,
      visible: false,
      num:0,
      text:''
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    },300);
  }
  
  confirm = (e) =>{
    delete projectData[this.state.key].user[e];
    const user = [];
    let keyArray = 0;
    endexData[analysisJson.region].user.map((item) => {
      projectData[this.state.key].user.map((i) => {
        if(i === item.name){
          item.ranksId = endexData[analysisJson.region].ranksId;
          item.region = regionArray[endexData[analysisJson.region].key-1];
          item.key = keyArray;
          keyArray++;
          user.push(item);
        }
      })
    });
    this.setState({user});
    message.success('删除成功!');
  }

  showModal = () => {
    if(this.state.data.state !== 0){
      message.error('项目不在进行中!');
    }else{
      this.setState({
        visible: true,
      });
    }
  }
  handleOk = (e) => {
    let date = new Date();
    date = formatTime(date,'yyyy-mm-dd hh:ff:ss');
    projectData[this.state.key].process = projectData[this.state.key].process+this.state.num;
    if(projectData[this.state.key].process > 100 )projectData[this.state.key].process = 100;
    if(projectData[this.state.key].process < 0 )projectData[this.state.key].process = 0;
    projectData[this.state.key].capitalIng = projectData[this.state.key].capitalIng-this.state.capital;
    projectData[this.state.key].data.push({num:this.state.num,text:this.state.text,date,name:adminUser.name,capital:this.state.capital});
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }

  handleState = (e) => {
    projectData[this.state.key].state = e;
    let newData = {...this.state.data};
    newData.state = e
    this.setState({data:newData});
  }

  render() {  
    const menu = (
      <Menu>
        <Menu.Item key="Menu1" ><a style = {{color:'#FF0000'}} onClick ={() => this.handleState(1)}>终止项目</a></Menu.Item>
        <Menu.Item key="Menu2" ><a style = {{color:'#008CFF'}} onClick ={() => this.handleState(2)}>完成项目</a></Menu.Item>
      </Menu>
    );
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
    }, {
      title: '队伍编号',
      dataIndex: 'ranksId',
    }, {
      title: '手机号码',
      dataIndex: 'tel',
    }, {
      title: '地区',
      dataIndex: 'region',
    },{
      title: '职位',
      dataIndex:'position'
    },{
      title: '操作',
      render: (text, record) => (
        <Popconfirm title="确认删除?" onConfirm={() => this.confirm(record.key)} okText="Yes" cancelText="No">
          <a href="#">删除</a>
        </Popconfirm>
      ),
    }];
    const columns1 = [{
      title: '时间',
      width:'25%',
      dataIndex: 'date',
    }, {
      title: '姓名',
      width:'15%',
      dataIndex: 'name',
    }, {
      title: '进度',
      width:'15%',
      dataIndex: 'num',
    }, {
      title: '资金调用',
      width:'15%',
      dataIndex: 'capital',
    }, {
      title: '日报',
      dataIndex: 'text',
    }];
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };

    projectData[this.state.key].data.map((i,item) => {
      i.key = item;
    });

    let status = 'normal';
    let title = '进行中';
    if(this.state.data.state === 0){
      status='active';
    }else if(this.state.data.state === 1){
      status='exception';
      title = '终止';
    }else if(this.state.data.state ===2){
      status = 'success';
      title = '完成';
    }

    return (
      <div className = 'projectTeam'>
        <Row gutter = {16}>
          <Col span = {24} style = {{textAlign:'center'}}>
            <Card loading = {this.state.loading}>
              <Row gutter = {16}>
                <Col span = {24} style = {{textAlign:'left'}}>
                  <Breadcrumb>
                    <Breadcrumb.Item><Link to = '/Analysis'>首页</Link></Breadcrumb.Item>
                    <Breadcrumb.Item><Link to = '/ProjectTeam'>项目列表</Link></Breadcrumb.Item>
                    <Breadcrumb.Item>项目详情</Breadcrumb.Item>
                  </Breadcrumb>
                </Col>
                <Row gutter = {16} style = {{marginTop:20}}>
                  <Col span = {8} style = {{textAlign:'left'}}>
                    <p style = {{fontSize:'20px',paddingTop:20,verticalAlign:'middle'}}>
                      <Avatar style={{ backgroundColor: this.state.data.color, verticalAlign: 'middle'}}>
                        {this.state.data.title.substr(3,2)}
                      </Avatar>
                      <span style = {{paddingLeft:10}}>{this.state.data.title}</span>
                    </p>
                  </Col>
                  <Col span = {16} style = {{textAlign:'right',paddingTop:20}}>
                    <Button type="primary" style = {{marginRight:5}} onClick={this.showModal}>今日提交</Button>
                    <Dropdown overlay={menu}>
                      <Button>
                        更多 <Icon type="down" />
                      </Button>
                    </Dropdown>
                  </Col>
                </Row>
                <Col span = {5} offset = {1}>
                  <Form layout="inline" style = {{textAlign:'left'}}>
                    <FormItem label = '创建人'>
                      {this.state.data.name}
                    </FormItem>
                    <br />
                    <FormItem label = '初始分数'>
                      {this.state.data.initial}
                    </FormItem>
                    <br />
                    <FormItem label = '目标分数'>
                      {this.state.data.target}
                    </FormItem>
                  </Form>
                </Col>
                <Col span = {7}>
                  <Form layout="inline" style = {{textAlign:'left'}}>
                    <FormItem label = '描述'>
                      {this.state.data.task}
                    </FormItem>
                    <br />
                     <FormItem label = '创建时间'>
                      {this.state.data.startDate}
                    </FormItem>
                    <br />
                    <FormItem label = '结束时间'>
                      {this.state.data.endDate}
                    </FormItem>
                  </Form>
                </Col>
                <Col span = {11} style = {{display:'flex'}}>
                    <FormItem label = '状态' style = {{flex:'1'}}>
                      <span style = {{fontSize:20}}>{title}</span>
                    </FormItem>
                     <FormItem label = '可用资金' style = {{flex:'1'}}>
                      <span style = {{fontSize:20}}>{this.state.data.capitalIng}</span>
                    </FormItem>
                    <FormItem label = '全部资金' style = {{flex:'1'}}>
                      <span style = {{fontSize:20}}>{this.state.data.capitalAll}</span>
                    </FormItem>    
                </Col>
                <Col span = {24} style = {{paddingTop:20}}>
                  <div style = {{fontSize:18}}>项目进度:</div><Progress percent={this.state.data.process} status={status}/>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span = {24} style = {{marginTop:20}}>
            <Card loading = {this.state.loading} title = '项目成员'>
              <Table columns={columns} dataSource={this.state.user} locale = {{emptyText: <span >暂无数据</span>}}/>
            </Card>
          </Col>
          <Col span = {24} style = {{marginTop:20}}>
            <Card loading = {this.state.loading} title = '项目进度'>
              <Table columns={columns1} dataSource={projectData[this.state.key].data} locale = {{emptyText: <span >暂无数据</span>}}/>
            </Card>
          </Col>
         </Row>

         <Modal
          title="今日提交"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText = '提交'
          cancelText = '取消'
        >
          <Form>
            <FormItem
              label="进度增减"
              {...formItemLayout}
            >
              <InputNumber min={-10} max={10} defaultValue={0} onChange = {(e) => {this.setState({num:e})}}/>
            </FormItem>
            <FormItem
              label="调用资金"
              {...formItemLayout}
            >
              <InputNumber min={0} max={10000} defaultValue={0} onChange = {(e) => {this.setState({capital:e})}}/>
            </FormItem>
            <FormItem
              label='日报'
              {...formItemLayout}
            >
              <TextArea rows={4} onChange = {(e) => {this.setState({text:e.target.value})}}/>
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
  }
}
export default connect(
  mapStateToProps, {
  }
)(ProjectInfo)
